<template>
  <div class="countdown-progress inline">
    <a-progress
      type="circle"
      :percent="percent"
      :showInfo="false"
      :width="16"
      :strokeWidth="10"
    >
      <template #format="percent">
        <span style="color: red">{{ percent }}</span>
      </template>
    </a-progress>
  </div>
</template>

<script>
export default {
  data() {
    return {
      interval: null, // 倒计时
      percent: 0, // 倒计时进度
      clock: false // 倒计时锁
    };
  },
  methods: {
    // 倒计时
    countdown() {
      this.interval = setInterval(() => {
        this.percent += 1;
        if (this.percent >= 100) {
          this.$emit("finish");
          this.clear();
        }
      }, 100);
    },
    // 清除定时器
    clear() {
      clearInterval(this.interval);
      // 重置进度
      this.percent = 0;
      // 解锁
      this.clock = false;
    },
    // 开启定时器
    open() {
      if (this.clock) return;
      // 加锁
      this.clock = true;
      this.countdown();
    }
  }
};
</script>

<style lang="scss" scoped>
.countdown-progress {
  margin-right: 9px;
}
</style>
